<style lang="less">
.start-img{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  img{
    width: 100%;
    min-height: 100%;
    display: block;
    transition: all 3s;
    transform:scale(1,1);
    -webkit-transform:scale(1,1);
    opacity: 1;
    &.to-large{
      transform:scale(1.2,1.2);
      -webkit-transform:scale(1.2,1.2);
      opacity: 0;
    }
  }
  h2{
    position: absolute;
    left:0;
    right: 0;
    text-align: center;
    bottom: 100px;
    margin: auto;
    font-size: 20px;
    color:#fff;
  }
  h5{
   position: absolute;
    left:0;
    right: 0;
    text-align: center;
    bottom: 20px;
    margin: auto;
    font-size: 14px;
    color:#fff;
  }
}
</style>
<template>
  <div class="start-img">
    <img :src="imgUrl+'/public-pic?img='+startImg.img"  :class="{'to-large':loadingComplete}">
    <h2 >知乎日报</h2>
    <h5>{{startImg.text}}</h5>
  </div>
</template>
<script type="text/javascript">
import axios from 'axios'
  export default {
    data() {
      return {
        startImg:{},
        loadingComplete:false
      }
    },
    computed:{
      imgUrl() {
        return this.$store.state.imgUrl
      }
    },
    methods:{
      test() {
        console.log(1)
      }
    },
    created() {
      var that = this
        axios.get('/api/4/start-image/1080*1776')
        .then((response) => {
          this.startImg = response.data;
          this.loadingComplete = true;
          setTimeout(()=>{
            this.$router.push('/home')
          },3000)

        })
    }
  }
</script>

